import { FIELD_TYPE_MAP } from '@/constant/icons';
import './style.less'
import EditableTable from "@/components/DataFlow/common/EditableTable";
import useDesignerStore from '@/store/Designer';
import React, { useMemo } from 'react';
import { Space } from 'antd';
import { normalizeFieldType } from '@/utils/dataflow';

export const JoinResultField = ({
    datasource,
    onSelectionChange,
    onChange,
    selectedRowKeys
}) => {
    const { drawerHeight } = useDesignerStore()
    const columns = [
        {
            title: '字段原名',
            dataIndex: 'columnName',
            width: '30%',
            editable: true
        },
        {
            title: '字段类型',
            dataIndex: 'columnType',
            width: '20%',
            render: (_, record) => {
                const columnType = normalizeFieldType(record?.columnType)
                const TypeIcon = FIELD_TYPE_MAP[columnType]?.icon ?? FIELD_TYPE_MAP.unknown.icon
                const TypeLabel = FIELD_TYPE_MAP[columnType]?.label ?? FIELD_TYPE_MAP.unknown.label
                return <Space>
                    {
                        TypeIcon
                    }
                    <span style={{ color: '#000000a6' }}>
                        {
                            TypeLabel
                        }
                    </span>
                </Space>
            }
        },
        {
            title: '原字段名',
            dataIndex: 'sourceColumnName',
            width: '30%',
        },
        {
            title: '来源节点',
            dataIndex: 'sourceComponentName',
            width: '20%',
        }
    ];

    return <EditableTable selectedRowKeys={selectedRowKeys} columns={columns} dataSource={datasource} style={{width: 'calc(100% - 10px)'}}
        onSelectChange={onSelectionChange} size={{y: drawerHeight - 180}} onChange={onChange} rowKey='columnId'
    />
};